<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>主页</title>
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>
  <header>
    <nav>
      <a href="">首页</a>
      <a href="">内容</a>
      <a href="">其他</a>
    </nav>
  </header>

  <!-- carousel -->
  <div class="carousel">
    <!-- list item -->
    <div class="list">
      <div class="item">
        <img src="https://pub-point.hizh.cn/images/202309/26/65122e338bcb2f54e56f4c2e.jpeg" />
        <div class="content">
          <div class="author">向前</div>
          <div class="title">主题页</div>
          <div class="topic">风景篇</div>
          <div class="des">
            <!-- lorem 50 -->
            看似不起波澜的日复一日，一定会在某一天，让你看到坚持的意义。
          </div>
          <div class="buttons">
            <button>查看更多</button>
            <button>设计</button>
          </div>
        </div>
      </div>
      <div class="item">
        <img
          src="https://mmbiz.qpic.cn/mmbiz_jpg/scGBGrsVb5H7c4rrMyVzmjdDicKaDwsetqevwQEmGjqH6OgUqVgOrvf7WaYyZAlicE8lKhugjZ8c5mgzetVT5R6A/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1" />
        <div class="content">
          <div class="author">向前</div>
          <div class="title">主题站</div>
          <div class="topic">风景篇</div>
          <div class="des">
            未来藏在迷雾之中，隔着距离，看来叫人胆怯，但当你踏足其中，就会云开雾散。（《夜航西飞》）
          </div>
          <div class="buttons">
            <button>查看更多</button>
            <button>设计</button>
          </div>
        </div>
      </div>
      <div class="item">
        <img
          src="https://mmbiz.qpic.cn/mmbiz_jpg/scGBGrsVb5H7c4rrMyVzmjdDicKaDwset58jsVqDN9qku6kJ54ib79fAHZxU6UeReTBjWayHq67fLx8alTvMAJXQ/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1" />
        <div class="content">
          <div class="author">向前</div>
          <div class="title">主题站</div>
          <div class="topic">风景篇</div>
          <div class="des">
            唯有梦想才配让你不安，唯有行动才能解除你的不安。
          </div>
          <div class="buttons">
            <button>查看更多</button>
            <button>设计</button>
          </div>
        </div>
      </div>
      <div class="item">
        <img
          src="https://ts1.cn.mm.bing.net/th/id/R-C.90d36ba5c88a0355bd9ac17b16e82395?rik=R1h6J0QxudhRnA&riu=http%3a%2f%2fp8.itc.cn%2fq_70%2fimages03%2f20201009%2f8f72e6d6bc244620b7be96ea8112be17.jpeg&ehk=o4OLGfnzRwlzBEJJbF8SOP2AwR7S4uPRmQxNqRmbIHc%3d&risl=&pid=ImgRaw&r=0" />
        <div class="content">
          <div class="author">向前</div>
          <div class="title">主题站</div>
          <div class="topic">风景篇</div>
          <div class="des">
            生活总是这样，不能叫人处处都满意，但我们还要热情地活下去。人活一生，值得爱的东西很多，不要因为一个不满意，就灰心。
          </div>
          <div class="buttons">
            <button>查看更多</button>
            <button>设计</button>
          </div>
        </div>
      </div>
    </div>
    <!-- list thumnail -->
    <div class="thumbnail">
      <div class="item">
        <img src="https://pub-point.hizh.cn/images/202309/26/65122e338bcb2f54e56f4c2e.jpeg" />
        <div class="content">
          <div class="title">成太广场</div>
          <div class="description">透露着龙舟文化的气息</div>
        </div>
      </div>
      <div class="item">
        <img
          src="https://mmbiz.qpic.cn/mmbiz_jpg/scGBGrsVb5H7c4rrMyVzmjdDicKaDwsetqevwQEmGjqH6OgUqVgOrvf7WaYyZAlicE8lKhugjZ8c5mgzetVT5R6A/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1" />
        <div class="content">
          <div class="title">三板河</div>
          <div class="description">浪漫的水乡风光</div>
        </div>
      </div>
      <div class="item">
        <img
          src="https://mmbiz.qpic.cn/mmbiz_jpg/scGBGrsVb5H7c4rrMyVzmjdDicKaDwset58jsVqDN9qku6kJ54ib79fAHZxU6UeReTBjWayHq67fLx8alTvMAJXQ/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1" />
        <div class="content">
          <div class="title">幸福桥</div>
          <div class="description">寓意着幸福美满</div>
        </div>
      </div>
      <div class="item">
        <img
          src="https://ts1.cn.mm.bing.net/th/id/R-C.90d36ba5c88a0355bd9ac17b16e82395?rik=R1h6J0QxudhRnA&riu=http%3a%2f%2fp8.itc.cn%2fq_70%2fimages03%2f20201009%2f8f72e6d6bc244620b7be96ea8112be17.jpeg&ehk=o4OLGfnzRwlzBEJJbF8SOP2AwR7S4uPRmQxNqRmbIHc%3d&risl=&pid=ImgRaw&r=0" />
        <div class="content">
          <div class="title">乡村龙舟赛</div>
          <div class="description">感受龙舟竞渡的速度与激情</div>
        </div>
      </div>
    </div>
    <!-- next prev -->

    <div class="arrows">
      <button id="prev">
        <</button> <button id="next">>
      </button>
    </div>
    <!-- time running -->
    <div class="time"></div>
  </div>

  <script src="js/app.js"></script>
</body>

</html>